<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :title="title"
    align-center
    draggable
    width="80%"
    style="border-radius: 10px; padding: 5px 10px">
    <el-table :data="tableData">
      <el-table-column prop="deptName" label="部门" width="" />
      <el-table-column prop="position" label="岗位名称" width="" />
      <el-table-column prop="name" label="被考核人" width="" />
      <el-table-column prop="originalScore" label="当前总分" width=""/>
    </el-table>
	
	
	<el-table
	  :data="tableData2"
	  border
	  style="width: 85%; margin: 20px auto;border-radius: 8px; margin: 20px auto;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
	  :header-cell-style="{
	      'background': '#337ecc !important',
	      'color': '#ffffff',
	      'border': 'none !important'
	    }"
		:span-method="(value) => rowSpanRulesHandler(value, tableData2)">
		>
		
		<!-- :span-method="(value) => rowSpanRulesHandler(value, tableData)"
		
		 @selection-change="handleSelectionChange" -->
		
	<el-table-column prop="type" label="考核条目类型" />
	<el-table-column prop="target" label="考核条目" width="" />
	
	<el-table-column prop="scorePercent" label="考核条目占比%" width="140">
		<template #default="scope">
				{{scope.row.scorePercent}}%
		</template>
	</el-table-column>
		
	<el-table-column prop="assessorName" label="评分人" width="140"/>
	<el-table-column prop="assessorPercent" label="评分人占比%" width="140">
		<template #default="scope">
					{{scope.row.assessorPercent}}%
			</template>
	</el-table-column>
	<el-table-column prop="score" label="评分" width="140"/>
	<el-table-column prop="grade" label="考核得分" width="">
		<template #default="scope">
			
			{{Math.round(((scope.row.scorePercent*scope.row.assessorPercent*scope.row.score/10000))* 100) / 100}}
					
		</template>
		</el-table-column>
	<el-table-column prop="remark" label="评分说明" width=""/>
	</el-table>
	
	
    <el-form
      :model="tableData"
      label-width="120px"
      class="demo-dynamic"
      size="large"
      style="margin: 20px"
    >
	<!-- 原本叫做修正值 -->
      <el-form-item label="加减分" width="250px">
        <el-input v-model="form.updateScore" style="width: 250px" />
      </el-form-item>
	  <el-form-item label="说明" width="250px">
	    <el-input v-model="form.remark" style="width: 250px" />
	  </el-form-item>
      <el-form-item>
        <el-button style="width: 150px" type="primary" @click="submitForm"
          >提交</el-button
        >
        <el-button style="width: 150px" @click="onClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, onBeforeMount, reactive, defineProps, defineEmits,watch} from "vue";
import {reAdd,getEmpScoreTotalDetail} from '@/api/empScoreTotal'
import { ElMessage } from "element-plus";

const dialogFormVisible = ref(true);
const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    required: true,
  },
  select: {
    type: Array,
    required: true, 
  },
  update: {
    type: Function,
    default: () => {},
  },
  close: {
    type: Function,
    default: () => {},
  },
});

const tableData = ref([])
const form=reactive({
  id:"",
  updateScore:0,
  remark:""
})

const tableData2 = ref([])
watch(props, (newValue, oldValue) => {
  tableData.value.splice(0,tableData.value.length)
  tableData.value.push(newValue.select)
  form.id=newValue.select.id;
  form.updateScore=newValue.select.updateScore
  form.remark=newValue.select.remark
  getEmpScoreTotalDetail({empId:newValue.select.empId,positionId:newValue.select.positionId}).then(data=>{
		tableData2.value=data.data
  })
},{ deep: true });   

const submitForm = () => {
	console.log(form)
    reAdd(form).then(data=>{
      if (data.code == 200) {
        ElMessage({
          message: "修正成功",
          type: "success",
        });
        props.update();
        props.close()
      }
    })
};

const onClose=()=>{
  props.close()
}


const columns2 = [
  "type",
  "target",
  "scorePercent",
  "assessorName",
  "assessorPercent",
  "score",
  "grade",
  "remark"
];


const rowSpanRulesHandler = ({  row, column, rowIndex, columnIndex }, data) => {
  //console.log(columns[columnIndex]);
 
	  if (columns2[columnIndex] === "type") {
	    return compareSingleAttrReturnColSpan(row, "type", rowIndex, data);
	  } else if (columns2[columnIndex] === "target") {
	    return compareSingleAttrReturnColSpan(row, "target", rowIndex, data);
	  } else if (columns2[columnIndex] === "scorePercent") {
	    return compareSingleAttrReturnColSpan(row, "scorePercent", rowIndex, data);
	  }
  
 
};

const compareSingleAttrReturnColSpan = (row, compareAttr, index, tableData) => {
  let count = 0;
    let start = index;
  
   while (start < tableData.length) {
   	
   		
   	if(start > index &&compareAttr==="scorePercent"&&row["target"] !== tableData[start]["target"]){
   		break
   	}else{
   		// 进入循环，检查下一个元素
   		if (start > index && row[compareAttr] !== tableData[start][compareAttr]) {
   			break;  // 如果不相等，则停止合并
   		}
   		count++;  // 计数相同的行
   		start++;  // 移动到下一行
   	}
   	
     
   }
  
    // 将合并的行数存储在行数据中
    if (start > index) {
      tableData[index][`${compareAttr}_count`] = count;
    }
  
    // 检查前一行的合并数量与当前行是否相等
    const previousRowCount = index > 0 ? tableData[index - 1][`${compareAttr}_count`] : 0;
    return previousRowCount === count + 1 ? [0, 0] : [count, 1];
};

</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>
